<template>
	<view class="order-way">
		<view :class="['order-way-active', orderType === '1' ? 'order-way-active2' : 'order-way-active1']"/>
		<view class="order-way-btn1" @tap="updateOrderType('1')">
		  <text :style="{color: orderType === '1' ? '#fff' : '#000', fontWeight: orderType === '1' ? 'bold' : 'normal'}">店食</text>
		</view>
		<view class="order-way-btn2" @tap="updateOrderType('2')">
		  <text :style="{color: orderType === '2' ? '#fff' : '#000', fontWeight: orderType === '2' ? 'bold' : 'normal'}">外卖</text>
		</view>
	</view>
</template>

<script>
	import {mapState, mapActions} from 'vuex';
	export default {
		computed: {
			...mapState(['store', 'orderType']),
		},
		methods: {
			...mapActions(['setOrderType']),
			updateOrderType(orderType) {
				if(orderType === '2') {
					let distance = 0;
					if(this.store.distance.indexOf('km') != -1) {
						distance = this.store.distance.slice(0, -2)*1;
					} else {
						distance = this.store.distance.slice(0, -1)*1;
					}
					if(distance > this.store.maxDistance) {
						uni.showModal({
							title: '提示',
							content: '距离太远, 暂不支持配送',
							confirmText: '确认',
							showCancel: false,
							confirmColor: '#EE0A24'
						})
					} else {
						// 未超出配送距离
						this.setOrderType({orderType});
					}
				} else {
					// 店食
					this.setOrderType({orderType});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-way {
		width: 160rpx;
		height: 48rpx;
		border-radius: 24px;
		background-color: #f7f7f7;
		position: relative;
		padding: 2px;
		.order-way-active {
			width: 80rpx;
			height: 48rpx;
			border-radius: 24rpx;
			background-color: #db3231;
			transition: all 300ms;
		}
		.order-way-btn1,  .order-way-btn2{
			width: 50%;
			height: 100%;
			font-size: 24rpx;
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			top: 0;
		}
		.order-way-btn1 {
			left: 0;
		}
		.order-way-btn2 {
			right: 0;
		}
		.order-way-active1 {
			transform: translateX(100%);
		}
		.order-way-active2 {
			transform: translateX(0%);
		}
	}
</style>
